<template>
	<div class="view">
		<!-- 头部 -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-20 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_title">位置管理</div>
		</div>
		<!-- 头部 end -->

		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{ height: height + 'px' }">
				<div class="line" style="margin-bottom: 20px;">
					<div class="line_title">位置列表</div>
					<div class="line-search" style="display: flex;">
						<el-input v-model="keywords" placeholder="输入关键词搜索" size="medium"></el-input>
						<el-button size="medium" type="primary" style="margin-left: 20px;" @click="search()">搜索</el-button>
					</div>
					<!-- <div class="line_btn">
						<el-button icon="el-icon-plus" type="text" @click="addShow = true">添加位置</el-button>
					</div> -->
				</div>
				<div class="table">
					<el-table ref="multipleTable" :data="sort_list" tooltip-effect="dark" style="width: 100%"
						:height="table_height">

						<el-table-column type="index" label="ID" min-width="14%" align="center">
						</el-table-column>
						<el-table-column prop="sort" label="位置" min-width="14%" align="center">
						</el-table-column>
						<!-- <el-table-column prop="sort" label="操作" min-width="14%" align="center">
							<template slot-scope="item">
								<el-button type="mini" @click="updateOpen(item.row)">编辑</el-button>
								<el-button type="mini" @click="remove(item.row)">删除</el-button>
							</template>
						</el-table-column> -->
					</el-table>
					<div class="item_bottom">
						<div class="item_num">共{{total}}条信息</div>
						<div class="item_page">
							<el-pagination background layout="prev, pager, next, jumper" :total="total"
								@current-change="handleCurrentChange">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 主体部分 end -->

		<!-- 添加位置 -->
		<el-dialog title="添加位置" :visible.sync="addShow" width="30%" :before-close="addLogClose"
			:close-on-click-modal="false">
			<div class="dialog-con">
				<div class="dialog-form">
					<el-form :model="form" ref="form">
						<el-form-item label="位置名称" prop="sort" :rules="[{
							required: true,
							message: '请输入位置名称',
							trigger: 'blur'
						}]">
							<el-input placeholder="请输入位置名称" v-model="form.sort"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="addLogClose">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 编辑位置 -->
		<el-dialog title="添加位置" :visible.sync="editShow" width="30%" :before-close="eddLogClose"
			:close-on-click-modal="false">
			<div class="dialog-con">
				<div class="dialog-form">
					<el-form :model="form2" ref="form">
						<el-form-item label="位置名称" prop="sort" :rules="[{
							required: true,
							message: '请输入位置名称',
							trigger: 'blur'
						}]">
							<el-input placeholder="请输入位置名称" v-model="form2.sort"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="eddLogClose">取 消</el-button>
				<el-button type="primary" @click="submit2">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
export default {
	data() {

		return {
			height: document.documentElement.clientHeight - 104,
			table_height: document.documentElement.clientHeight - 344,
			sort_list: [],
			defaultprop: {
				children: 'catalogNodeVos',
				label: 'sort'
			},
			name: this.$root.ptName,
			picdir: this.$root.ptPicdir,
			addShow: false,
			editShow: false,
			total:null,
			limit:10,
			form: {
				sort: ""
			},
			form2: {
				sort: "",
				id: "",
			},
			current:1,
			keywords:"",
		}
	},
	methods: {
		search(){
			this.current =1;
			this.data_init()
		},
		handleCurrentChange(num){
			this.current = num;
			this.data_init();
		},
		updateOpen(item) {
			this.form2.sort = item.sort;
			this.form2.id = item.id;
			this.editShow = true;
		},

		submit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.save()
				}
			})
		},

		save() {
			this.$http({
				url: this.$api.adSortAdd,
				method: 'post',
				data: this.form
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message);
					this.addLogClose();
					this.data_init();
				} else {
					this.$message.error(res.data.message)
				}
			})
		},

		submit2() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.update()
				}
			})
		},

		update() {
			this.$http({
				url: this.$api.adUpdateName,
				method: 'post',
				data: this.form2
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message);
					this.eddLogClose();
					this.data_init();
				} else {
					this.$message.error(res.data.message)
				}
			})
		},

		addLogClose() {
			this.$refs.form.resetFields()
			this.addShow = false
		},
		eddLogClose() {
			this.$refs.form.resetFields()
			this.editShow = false
		},
		// 加载位置列表
		data_init() {
			this.$http({
				'method': 'post',
				'url': this.$api.adSortListLimit,
				data:{
					current:this.current,
					limit:this.limit,
					keywords:this.keywords
				}
			}).then(res => {
				if (res.data.code == 20000) {
					this.sort_list = res.data.data.list
					this.total = res.data.data.total
				}
			})

		},

		// 跳转修改
		edit(data) {
			localStorage.setItem('sort_id', data.id)
			// localStorage.setItem('s_id', data.id)
			this.$router.push('/sort_add')
		},

		// 删除
		remove(data) {
			console.log(data)
			this.$confirm('是否删除这条位置?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					'method': 'get',
					'url': this.$api.adSortRemove + data.id
				}).then(res => {
					if (res.data.code == 20000) {
						this.$message({
							type: 'success',
							message: res.data.message
						});
						this.data_init()
					} else {
						this.$message.error(res.data.message)
					}
				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},


		to_exit() {
			this.$router.go(-1)
		},
		to_add() {
			localStorage.removeItem('sort_id')
			this.$router.push('/sort/add')
		},


	},
	created() {
		this.data_init()
	}
}
</script>

<style scoped>
@import url("../../assets/css/infoSort.css");
@import url("../../assets/css/class.css");

.h_user * {
	cursor: pointer;
}
</style>
